<template>
    <transition name="fade">
        <div class="toast-wrapper" v-show="visible" :class="type">
            {{ message }}
        </div>
    </transition>
</template> 
<script>
    export default {
        name: 'Toast',
        data () {
            return {
                visible: true,
                type: '',
                message: ''
            }
        }
    }
</script>
<style lang="scss">
    .toast-wrapper{
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        display: inline-block;
        padding:7px 15px;
        border-radius: 5px;
        background: rgba(0, 0, 0, .5);
        color: #fff;
        &.top{
            top:8%;
            bottom: auto;
            -webkit-tranform: translate(-50%, 0);
        }
        &.bottom{
            top: auto;
            bottom:20%;
            -webkit-tranform: translate(-50%, 0);
        }
    }
    .fade-enter-active,
    .fade-leave-active{
        animation: all .3s ease;
    }
    .fade-enter, .fade-leave{
        opacity: 1;
    }
</style>